[Security Solution] - Update exceptions item UI #135255

yctercero · 2022-06-27T20:00:02Z

Summary

Updates the exceptions viewer item UI to match new designs. There are still some small aspects missing, but bulk of updated UI is there.

NOTE: There seems to be an existing bug where the field is not populated when selecting to edit an exception item.

Left to do

Add meta info showing what list the item is linked to
Add meta info showing what rule the item is linked to

Existing UI

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

…-ref HEAD~1..HEAD --fix'

yctercero · 2022-06-27T20:31:11Z

...ins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.tsx

@@ -81,21 +78,13 @@ const ExceptionsViewerItemsComponent: React.FC<ExceptionsViewerItemsProps> = ({
            exceptions.length > 0 &&
            exceptions.map((exception, index) => (
              <MyFlexItem data-test-subj="exceptionItemContainer" grow={false} key={exception.id}>
-                {index !== 0 ? (


Removes the OR between exception item cards as it no longer appears in new designs.

…-fix'

elasticmachine · 2022-06-29T04:07:08Z

Pinging @elastic/security-solution (Team: SecuritySolution)

…-fix'

nkhristinin · 2022-06-30T08:49:55Z

...c/common/components/exceptions/viewer/exception_item_card/exception_item_card_conditions.tsx

+      <div data-test-subj={dataTestSubj}>
+        {entries.map((entry, index) => {
+          const { field, type } = entry;
+          const value = 'value' in entry ? entry.value : '';


Just out of curiosity, do we have here any specific reason to use the in operator and not something like:
const value = entry?.value ?? ''

It's funky because of the typescript union in which a specific property (in this case value) is not present in all union types, so ? doesn't solve it in this case. I did try, but typescript still yelled at me.

Sure, you're right!

Found this issue

nkhristinin · 2022-06-30T09:01:01Z

...s/security_solution/public/common/components/exceptions/viewer/exception_item_card/index.tsx

+  }, [exceptionItem.comments]);
+
+  const disableItemActions = useMemo((): boolean => {
+    const foundItems = loadingItemIds.filter(({ id }) => id === exceptionItem.id);


nit: Because later you check for foundItems.length > 0 maybe better here to use .some which will return you boolean in the first place

nkhristinin · 2022-06-30T09:40:30Z

.../public/common/components/exceptions/viewer/exception_item_card/exception_item_card_meta.tsx

+            fieldName="created_by"
+            label={i18n.EXCEPTION_ITEM_CREATED_LABEL}
+            value1={
+              <FormattedDate fieldName="created_by" value={item.created_at} dateFormat="MM/DD/YY" />


Should we specifically use this format here? As I understand it's US only.)

Also in Kibana Advanced settings, we have Date format - the user can specify how they want present dates, maybe it's better to use this one?

That's a great point. I updated to not specify so that it should fall back to the users date preference.

nkhristinin · 2022-06-30T10:18:29Z

Here is text alignment is a bit off:

After I created a new rule and add an exception, the exception list blinked for a second and after that didn't show until I click refresh:

Screen.Recording.2022-06-30.at.12.05.29.mov

yiyangliu9286

I think the component usage we use in the designs for Created and Updated is EuiBadges instead of EuiBetaBadge just to be consistent with the designs.

yctercero · 2022-07-07T20:58:07Z

@nkhristinin @yiyangliu9286

Updated the UI to:

make sure the text around Created and Updated aligns
use EuiBadge instead of EuiBadgeBeta
remove the WHEN on an initial condition since it's not in the design, designs just have no descriptor word for the initial condition
Allow date to be formatted per user's advanced settings preference

Also, here's an example of what an endpoint exception item looks like.

…-ref HEAD~1..HEAD --fix'

yctercero · 2022-07-07T22:05:09Z

Here is text alignment is a bit off:

After I created a new rule and add an exception, the exception list blinked for a second and after that didn't show until I click refresh:

Screen.Recording.2022-06-30.at.12.05.29.mov

Addressed both issues - thanks for finding this @nkhristinin !

bug_fix.mov

…-fix'

nkhristinin

The exceptions card looks pleasant now, great work! LGTM!

kibana-ci · 2022-07-08T19:58:58Z

💔 Build Failed

Failed CI Steps

Build and Deploy to Cloud

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	3112	3113	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	5.2MB	5.2MB	+46.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`securitySolution`	442	441	-1

Total ESLint disabled count

id	before	after	diff
`securitySolution`	517	516	-1

History

💔 Build #56133 failed f325a07
💔 Build #54111 failed 6b9f609
💔 Build #54083 failed 4509c75
💔 Build #53668 failed 187278a
💔 Build #53656 failed a6b1070

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @yctercero

yctercero and others added 5 commits June 27, 2022 12:37

added unit tests

3b4a9e6

edited unit tests

9215966

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

4fc70e3

…-ref HEAD~1..HEAD --fix'

some cleanup

95cc843

Merge branch 'entry_ux' of github.com:yctercero/kibana into entry_ux

0e2bae2

yctercero self-assigned this Jun 27, 2022

yctercero added release_note:enhancement Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Security Solution Platform Security Solution Platform Team ci:deploy-cloud v8.4.0 labels Jun 27, 2022

Merge branch 'main' of github.com:yctercero/kibana into entry_ux

7e98bfe

yctercero commented Jun 27, 2022

View reviewed changes

yctercero and others added 8 commits June 27, 2022 13:47

update comments color

fb1f464

Remove console log

a6b1070

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

187278a

…-fix'

fixing up lint and tests

7718b62

Merge branch 'main' of github.com:elastic/kibana into entry_ux

c50d9de

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

4509c75

…-fix'

fixing cypress tests

ef7f86b

Merge branch 'main' of github.com:elastic/kibana into entry_ux

6861fd6

yctercero marked this pull request as ready for review June 29, 2022 04:07

yctercero requested review from a team as code owners June 29, 2022 04:07

yctercero requested a review from yiyangliu9286 June 29, 2022 04:08

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

6b9f609

…-fix'

nkhristinin reviewed Jun 30, 2022

View reviewed changes

yiyangliu9286 approved these changes Jun 30, 2022

View reviewed changes

Merge branch 'main' of github.com:elastic/kibana into entry_ux

ea7d533

yctercero and others added 4 commits July 7, 2022 14:04

updating per PR feedback

611cc25

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

2cc3460

…-ref HEAD~1..HEAD --fix'

fix bug rendering initial item exception after creation

be769ed

Merge branch 'entry_ux' of github.com:yctercero/kibana into entry_ux

1dffbc9

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

f325a07

…-fix'

nkhristinin self-requested a review July 8, 2022 13:19

nkhristinin approved these changes Jul 8, 2022

View reviewed changes

yctercero added 3 commits July 8, 2022 11:44

Merge branch 'main' of github.com:elastic/kibana into entry_ux

6e8959a

fix cypress tests

9922839

Merge branch 'entry_ux' of github.com:yctercero/kibana into entry_ux

4bd5b5f

yctercero enabled auto-merge (squash) July 8, 2022 19:42

yctercero merged commit 0a0b0a1 into elastic:main Jul 8, 2022

kibanamachine added the backport:skip This commit does not require backporting label Jul 8, 2022

yctercero deleted the entry_ux branch July 8, 2022 21:17

yctercero mentioned this pull request Jul 8, 2022

[Security Solution][Exceptions] - Update entry item UI #135254

Closed

10 tasks

yctercero mentioned this pull request Aug 2, 2022

[Docs][Exceptions] - Screenshot updates elastic/security-docs#2241

Closed

tylersmalley added ci:cloud-deploy Create or update a Cloud deployment and removed ci:deploy-cloud labels Aug 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] - Update exceptions item UI #135255

[Security Solution] - Update exceptions item UI #135255

yctercero commented Jun 27, 2022 •

edited

Loading

yctercero Jun 27, 2022

elasticmachine commented Jun 29, 2022

nkhristinin Jun 30, 2022

yctercero Jul 7, 2022

nkhristinin Jul 8, 2022

nkhristinin Jun 30, 2022

yctercero Jul 7, 2022

nkhristinin Jun 30, 2022

yctercero Jul 7, 2022

nkhristinin commented Jun 30, 2022

yiyangliu9286 left a comment

yctercero commented Jul 7, 2022 •

edited

Loading

yctercero commented Jul 7, 2022

nkhristinin left a comment •

edited

Loading

kibana-ci commented Jul 8, 2022 •

edited

Loading

ESLint disabled line counts

Total ESLint disabled count

[Security Solution] - Update exceptions item UI #135255

[Security Solution] - Update exceptions item UI #135255

Conversation

yctercero commented Jun 27, 2022 • edited Loading

Summary

Left to do

Existing UI

Checklist

Choose a reason for hiding this comment

elasticmachine commented Jun 29, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nkhristinin commented Jun 30, 2022

yiyangliu9286 left a comment

Choose a reason for hiding this comment

yctercero commented Jul 7, 2022 • edited Loading

yctercero commented Jul 7, 2022

nkhristinin left a comment • edited Loading

Choose a reason for hiding this comment

kibana-ci commented Jul 8, 2022 • edited Loading

💔 Build Failed

Failed CI Steps

Metrics [docs]

Module Count

Async chunks

ESLint disabled line counts

Total ESLint disabled count

History

yctercero commented Jun 27, 2022 •

edited

Loading

yctercero commented Jul 7, 2022 •

edited

Loading

nkhristinin left a comment •

edited

Loading

kibana-ci commented Jul 8, 2022 •

edited

Loading